﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Walkthrough Part II: Adding API Documentation to the Website | DocFX website </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="Walkthrough Part II: Adding API Documentation to the Website | DocFX website ">
    <meta name="generator" content="docfx 2.37.0.0">
    
    <link rel="shortcut icon" href="../../favicon.ico">
    <link rel="stylesheet" href="../../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../../styles/docfx.css">
    <link rel="stylesheet" href="../../styles/main.css">
    <meta property="docfx:navrel" content="../../toc.html">
    <meta property="docfx:tocrel" content="../toc.html">
    
    <meta property="docfx:rel" content="../../">
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="../../index.html">
                <img id="logo" class="svg" src="../../logo.svg" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <form class="navbar-form navbar-right" role="search" id="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
                </div>
              </form>
            </div>
          </div>
        </nav>
        
        <div class="subnav navbar navbar-default">
          <div class="container hide-when-search" id="breadcrumb">
            <ul class="breadcrumb">
              <li></li>
            </ul>
          </div>
        </div>
      </header>
      <div class="container body-content">
        
        <div id="search-results">
          <div class="search-list"></div>
          <div class="sr-items">
            <p><i class="glyphicon glyphicon-refresh index-loading"></i></p>
          </div>
          <ul id="pagination"></ul>
        </div>
      </div>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="">
<h1 id="walkthrough-part-ii-adding-api-documentation-to-the-website">Walkthrough Part II: Adding API Documentation to the Website</h1>

<p>After completing <a href="walkthrough_create_a_docfx_project.html">Walkthrough Part I: Generate a Simple Documentation Website</a>, we build a website from a set of <code>.md</code> files. We call it <strong>Conceptual Documentation</strong>. In this walkthrough, we will learn to build website from .NET source code, which is called <strong>API Documentation</strong>. We will also integrate <strong>Conceptual Documentation</strong> and <strong>API Documentation</strong> into one website, so that we can navigate from <strong>Conceptual</strong> to <strong>API</strong>, or <strong>API</strong> to <strong>Conceptual</strong> seamlessly. Download the files used in this walkthrough <a href="artifacts/walkthrough2.zip">here</a>.</p>
<p>After completing walkthrough part I, our <code>D:\docfx_walkthrough\docfx_project</code> folder is in the following structure:</p>
<pre><code>|- index.md
|- toc.yml
|- articles
|    |- intro.md
|    |- details1.md
|    |- details2.md
|    |- details3.md
|    |- toc.yml
|- images
     |- details1_image.png
|- api
     |- index.md
     |- toc.yml
</code></pre>
<h2 id="step1-add-a-c-project">Step1. Add a C# project</h2>
<ol>
<li>Create a subfolder <code>src</code> under <code>D:\docfx_walkthrough\docfx_project</code>. Open <em>Visual Studio Community 2015</em> (or an above version) and create a <strong>C# Class Library</strong> <code>HelloDocfx</code> under folder <code>src</code>. In the <code>Class1.cs</code>, add some comments and methods to this class, similar to:</li>
</ol>
<pre><code class="lang-csharp">namespace HelloDocfx
{
    /// &lt;summary&gt;
    /// Hello this is **Class1** from *HelloDocfx*
    /// &lt;/summary&gt;
    public class Class1
    {
        private InnerClass _class;
        public int Value { get; }

        /// &lt;summary&gt;
        /// This is a ctor
        /// &lt;/summary&gt;
        /// &lt;param name=&quot;value&quot;&gt;The value of the class&lt;/param&gt;
        public Class1(int value)
        {
            Value = value;
        }

        public double ConvertToDouble()
        {
            return Value;
        }

        /// &lt;summary&gt;
        /// A method referencing a inner class
        /// &lt;/summary&gt;
        /// &lt;param name=&quot;name&quot;&gt;The name&lt;/param&gt;
        /// &lt;param name=&quot;inner&quot;&gt;A inner class with type &lt;seealso cref=&quot;InnerClass&quot;/&gt;&lt;/param&gt;
        public void SetInnerClass(string name, InnerClass inner)
        {
            inner.Name = name;
            _class = inner;
        }

        public class InnerClass
        {
            public string Name { get; set; }
        }
    }
}
</code></pre>
<h2 id="step2-generate-metadata-for-the-c-project">Step2. Generate metadata for the C# project</h2>
<p>Calling <code>docfx metadata</code> under <code>D:\docfx_walkthrough\docfx_project</code>. <code>docfx metadata</code> is a sub-command registered in <code>docfx</code>, and it reads configuration in the <code>metadata</code> section from <code>docfx.json</code>. <code>[ &quot;src/**.csproj&quot; ]</code> in <code>metadata/src/files</code> tells <code>docfx</code> to search all the <code>csproj</code> from <code>src</code> subfolder to generate metadata.</p>
<pre><code class="lang-json">&quot;metadata&quot;: [
    {
      &quot;src&quot;: [
        {
          &quot;files&quot;: [
            &quot;src/**.csproj&quot;
          ],
          &quot;exclude&quot;: [
            &quot;**/bin/**&quot;,
            &quot;**/obj/**&quot;,
            &quot;_site/**&quot;
          ]
        }
      ],
      &quot;dest&quot;: &quot;api&quot;
    }
  ]
</code></pre>
<p>This generates several <code>YAML</code> files in the <code>api</code> folder. The <code>YAML</code> file contains the data model extracted from C# source code file. YAML is the metadata format used in <code>docfx</code>. <a href="http://dotnet.github.io/docfx/spec/metadata_format_spec.html">General Metadata Spec</a> defines the general schema, and <a href="http://dotnet.github.io/docfx/spec/metadata_dotnet_spec.html">.NET Metadata Spec</a> defines the metadata schema for .NET languages that <code>docfx</code> can consume.</p>
<pre><code>|- HelloDocfx.Class1.InnerClass.yml
|- HelloDocfx.Class1.yml
|- HelloDocfx.yml
|- toc.yml
</code></pre>
<h2 id="step3-build-and-preview-our-website">Step3. Build and preview our website</h2>
<p>Running the command <code>docfx</code>. <code>docfx</code> reads <code>docfx.json</code> and execute subcommands defined in the config file one by one. Our <code>docfx.json</code> defines <code>metadata</code> and <code>build</code>, so by running <code>docfx</code>, we are actually executing <code>docfx metadata</code> and <code>docfx build</code>, and thus generating the website.</p>
<p>Run <code>docfx serve _site</code>, and the website is now:
<img src="images/walkthrough2_step3.png" alt="Step3">.</p>
<h2 id="step4-add-another-api-documentation">Step4. Add another API documentation</h2>
<p>Create another subfolder <code>src2</code> under <code>D:\docfx_walkthrough\docfx_project</code>. Besides generating API documentation from project files, <code>docfx</code> can generate documentation directly from source code. Let's create a <code>Class2.cs</code> as similar to:</p>
<pre><code class="lang-csharp">namespace HelloDocfx
{
    /// &lt;summary&gt;
    /// Hello this is **Class2** from *HelloDocfx*
    /// &lt;/summary&gt;
    public class Class2
    {
        private InnerClass _class;
        public int Value { get; }

        /// &lt;summary&gt;
        /// This is a ctor
        /// &lt;/summary&gt;
        /// &lt;param name=&quot;value&quot;&gt;The value of the class&lt;/param&gt;
        public Class2(int value)
        {
            Value = value;
        }

        public double ConvertToDouble()
        {
            return Value;
        }

        /// &lt;summary&gt;
        /// A method referencing a inner class
        /// &lt;/summary&gt;
        /// &lt;param name=&quot;name&quot;&gt;The name&lt;/param&gt;
        /// &lt;param name=&quot;inner&quot;&gt;A inner class with type &lt;seealso cref=&quot;InnerClass&quot;/&gt;&lt;/param&gt;
        public void SetInnerClass(string name, InnerClass inner)
        {
            inner.Name = name;
            _class = inner;
        }

        public class InnerClass
        {
            public string Name { get; set; }
        }
    }
}
</code></pre>
<p>Add it to the <code>metadata</code> section of our <code>docfx.json</code> as follows.</p>
<pre><code class="lang-json">&quot;metadata&quot;: [
    {
      &quot;src&quot;: [
        {
          &quot;files&quot;: [
            &quot;src/**.csproj&quot;
          ],
          &quot;exclude&quot;: [
            &quot;**/bin/**&quot;,
            &quot;**/obj/**&quot;,
            &quot;_site/**&quot;
          ]
        }
      ],
      &quot;dest&quot;: &quot;api&quot;
    },
    {
      &quot;src&quot;: &quot;src2/**.cs&quot;,
      &quot;dest&quot;: &quot;api-vb&quot;
    }
  ]
</code></pre>
<p>What it means is that the YAML metadata files for &quot;src2/**.cs&quot; are generated into &quot;api-vb&quot; folder. Let's also include the generated YAML files in <code>build</code> section:</p>
<pre><code class="lang-json">  &quot;build&quot;: {
    &quot;content&quot;: [
      {
        &quot;files&quot;: [
          &quot;api-vb/**.yml&quot;
        ]
      }
      ...
</code></pre>
<p>For it to be organized and shown to website, we also need to modify our <code>D:\docfx_walkthrough\docfx_project\toc.yml</code> file. Don't forget to append slash <code>/</code> for the value of <code>href</code>.</p>
<pre><code>- name: Articles
  href: articles/
- name: Api Documentation
  href: api/
  homepage: api/index.md
- name: Another Api Documentation
  href: api-vb/
</code></pre>
<p>Now, let's run <code>docfx --serve</code> again, and the website is now:
<img src="images/walkthrough2_step4.png" alt="Step4">.</p>
<h2 id="step5-combine-conceptual-and-reference-information-in-the-left-side-nav-bar">Step5. Combine conceptual and reference information in the left-side nav bar.</h2>
<p>The left-side nav bar can contain links to both conceptual information (overview, getting started, etc.) and reference information. In this example, assume that this is the <code>toc.yml</code> file at root. (It determines what's in the main horizontal menu bar.)</p>
<pre><code class="lang-yml">- name: Home
  href: index.md
- name: Articles
  href: articles/
- name: API Documentation
  href: obj/api/
- name: REST API
  href: restapi/
</code></pre>
<p>Add a new folder at root (e.g., <code>fusion</code>).</p>
<p>Inside <code>fusion</code>, add <code>toc.yml</code>:</p>
<pre><code>- name: Conceptual
  href: ../articles/toc.md
- name: Reference
  href: ../obj/api/toc.yml
</code></pre>
<p>In <code>toc.yml</code> at root, replace the link to <code>../obj/api/toc.yml</code> with the path to <code>fusion</code>:</p>
<pre><code class="lang-yml">- name: Home
  href: index.md
- name: Articles
  href: articles/
  homepage: articles/docfx_getting_started.md
- name: API Documentation
  href: fusion/
- name: REST API
  href: restapi/
</code></pre>
<p>Add the <code>fusion</code> folder in <code>docfx.json</code> so the project includes it:</p>
<pre><code class="lang-json">&quot;content&quot;: [
  { 
    &quot;files&quot;: &quot;fusion/**&quot;
  }
]
</code></pre>
<p>The output:</p>
<p><img src="images/walkthrough2_step5.png" alt="Step5">.</p>
<p>The <a href="https://github.com/docascode/docfx-seed">docfx-seed sample project repo</a> is another example of this kind of setup.</p>
<p>More details: <a href="http://dotnet.github.io/docfx/tutorial/intro_toc.html#link-to-another-toc-file">http://dotnet.github.io/docfx/tutorial/intro_toc.html#link-to-another-toc-file</a></p>
<h2 id="conclusion">Conclusion</h2>
<p>In this walkthrough, we build a website containing both <strong>Conceptual Documentation</strong> and <strong>API Documentation</strong>. In the upcoming series of advanced walkthroughs, we will learn advanced concepts in <code>docfx</code>, such as <em>cross reference</em> between articles, <em>external reference</em> to other documentations, etc. We will also learn to customize our websites, from theme to layout to metadata extraction.</p>
<h2 id="read-more">Read more</h2>
<ul>
<li><p><a href="walkthrough_create_a_docfx_project.html">Walkthrough Part I: Generate a Simple Documentation Website</a></p>
</li>
<li><p><a href="advanced_walkthrough.html">Walkthrough Advanced: Customize Your Website</a></p>
</li>
</ul>
<div id="disqus_thread"></div>
                <script>
                (function() { // DON'T EDIT BELOW THIS LINE
                var d = document, s = d.createElement('script');
                s.src = 'https://docfx-github.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
                })();
                </script>
                <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
            </article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="#disqus_thread" class="contribution-link">0 Comments</a>
                  </li>
                </ul>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to top</a>
            </span>
            <span>Copyright © 2015-2018 Microsoft<br>Generated by <strong>DocFX</strong></span>
            
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../../styles/docfx.js"></script>
    <script type="text/javascript" src="../../styles/main.js"></script>
    <script id="dsq-count-scr" src="//docfx-github.disqus.com/count.js" async=""></script>
    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-99241001-1', 'auto');
      ga('send', 'pageview');
    
    </script>
  </body>
</html>
